import { useAppDispatch } from "@/hook/useRedux";
import { Checkbox } from "../ui/checkbox"
import { toggleStatusTask } from "@/redux/tasks/tasksSlice";

export const TaskCardCheckbox = ({ taskData, onClick }: { taskData: Task, onClick?(e: any): void }) => {
  const dispatch = useAppDispatch()

  const handleCheckboxClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    if (onClick) {
      onClick(event)
    } else {
      event.stopPropagation();
      const isChecked = taskData.is_closed === 1 ? 0 : 1
      dispatch(toggleStatusTask({
        status: isChecked,
        colId: taskData.column_id,
        taskId: taskData.id
      }))
    }
  };

  return (
    <Checkbox
      onClick={handleCheckboxClick}
      checked={!!taskData.is_closed}
      className='mt-1  size-[18px] rounded-full'
    />
  )
}